import React from "react";
import { useAuth } from "context/auth-context";
import ProjectList from "screens/project-list";
import ProjectDetails from "screens/project-details";
import { Button, Menu, Dropdown } from "antd";
import styled from "@emotion/styled";
import { Row, ButtonNoPadding } from "components/lib";
import logo from "assets/logo_2.svg";
import { Navigate, Route, Routes } from "react-router";
import { BrowserRouter as Router } from "react-router-dom";
import ProjectModal from "screens/project-list/modal";
import ProjectPopover from "components/project-popover";
import UserPopover from "components/user-popver";
import Undo from "screens/undo";

const Header = styled(Row)`
  height: 6rem;
  padding: 0 3.2rem;
  box-shadow: rgb(0 0 0 / 10%) 0px 0px 5px 0px;
  z-index: 1;
`;

const HeaderLeft = styled(Row)``;
const HeaderRight = styled.div``;

const PageHeader = () => {
  const { logout, user } = useAuth();

  const headerLeft = (
    <HeaderLeft gap>
      <ButtonNoPadding type="link" onClick={() => {}}>
        <img alt="" src={logo} style={{ height: 32 }} />
      </ButtonNoPadding>
      <ProjectPopover />
      <UserPopover />
    </HeaderLeft>
  );

  const headerRight = (
    <HeaderRight>
      <Dropdown
        overlay={
          <Menu>
            <Menu.Item key="logout">
              <Button onClick={logout} type="link">
                登出
              </Button>
            </Menu.Item>
          </Menu>
        }
      >
        <Button type="link">Hi, {user?.name}</Button>
      </Dropdown>
    </HeaderRight>
  );

  return (
    <Header between>
      {headerLeft}
      {headerRight}
    </Header>
  );
};

const Main = styled.main`
  height: calc(100vh - 6rem);
  display: flex;
  overflow: hidden;
`;

const AuthenticatedApp = () => {
  return (
    <Router>
      <PageHeader />
      <Main>
        <Routes>
          <Route path="project" element={<ProjectList />} />
          <Route path="project/:projectId/*" element={<ProjectDetails />} />
          <Route path="undo" element={<Undo />} />
          <Navigate to="project" />
        </Routes>
        <ProjectModal />
      </Main>
    </Router>
  );
};

export default AuthenticatedApp;
